<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入axios包 -->
    <script src="./node_modules/axios/dist/axios.min.js"></script>


    <style>
        body {
            margin: 0;
            padding: 30px;
        }

        a {
            text-decoration: none;
        }

        table,
        th,
        td {
            border: 1px solid black;
            /* 设置边框融合 */
            border-spacing: 0;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 5px 10px;
        }
    </style>


</head>

<body>
    <h1>用户列表</h1>
    <a href="./add.html">添加用户</a>
    <table>

        <thead>
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
        </thead>


        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>123</td>
                <td>
                    <a href="">编辑</a>
                    <a href="">删除</a>
                </td>
            </tr>



        </tbody>


    </table>


    <script>


        // 先实现填充数据的功能

        axios({
            url: 'http://localhost:3000/users',
            method: 'get',
        }).then(obj => {
            console.log(obj)
            const arr = obj.data
            console.log(arr)

            const tbody = document.querySelector('tbody')
            tbody.innerHTML = arr.map(item => {
                return `
                            <tr>
                        <td>${item.id}</td>
                        <td>${item.username}</td>
                        <td>${item.password}</td>
                        <td>
                            <a href="./edit.html?id=${item.id}">编辑</a>
                            <a href="" class='delete' id='${item.id}'>删除</a>
                        </td>
                    </tr>
                `
            }).join('')


            // 实现删除功能




            const Delete = document.querySelector('.delete')
            Delete.addEventListener('click', function () {



                axios.delete(`http://localhost:3000/users/${Delete.id}`)

            })








        })











    </script>








</body>

</html>